<template>
  <div class="info-wrap">
    <Title title="成本信息" style="font-size:16px; margin:32px 0 16px 0"/>
    <el-form
      :class="{'mobile-el-form': showMobilePage}"
      :label-position="showMobilePage?'left':'right'"
      label-width="110px"
      class="supplier-form height55">
      <template v-if="!isCommon">
        <!-- 小红书-->
        <template v-if="isRedBook">
          <el-table :data="redBookData" :border="true" :cell-class-name="tableCellClass">
            <el-table-column prop="name" width="60px"/>
            <el-table-column v-for="column in readBookColumns" :key="column.name" :min-width="column.width || defaultWidth">
              <template slot="header" slot-scope="scope">
                <div class="table-header">
                  <span class="label">{{ column.label }}</span>
                  <tip-icon v-if="redBookData.length" :img-height="16" :img-width="16" :content="`数据更新时间：${format(redBookData[0][column.parentKey].updateTime,'YYYY/MM/DD HH:mm')}<br/>数据来源：${redBookData[0][column.parentKey].dataSources?redBookData[0][column.parentKey].dataSources:'--'}`" use-html/>
                </div>
              </template>
              <template slot-scope="scope">
                <ToolTip
                  :content="getContent(column.parentKey,scope.row.key).content"
                  :tool-tip="getContent(column.parentKey,scope.row.key).toolTip" />
              </template>
            </el-table-column>
          </el-table>
        </template>
        <!-- 微博、抖音、B站 -->
        <template v-else>
          <el-table :data="getData" :border="true" :cell-class-name="tableCellClass">
            <el-table-column width="140px">
              <template slot-scope="scope">
                <div class="table-header" ><span class="label">{{ scope.row.name }}</span><tip-icon :content="`数据更新时间：${format(scope.row.updateTime,'YYYY/MM/DD HH:mm')}<br/>数据来源：${scope.row.dataSources?scope.row.dataSources:'--'}`" use-html/></div>
              </template>
            </el-table-column>
            <el-table-column v-for="column in getColumns" :key="column.name" :label="column.label" :min-width="column.width || defaultWidth">
              <template slot-scope="scope">
                <ToolTip
                  :content="getContent('costPrice',column.key).content"
                  :tool-tip="getContent('costPrice',column.key).toolTip" />
              </template>
            </el-table-column>
          </el-table>
          <template v-if="isWeiBo">
            <el-table :data="microTaskCostData" :border="true" :cell-class-name="tableCellClass" class="mt16">
              <el-table-column width="140px">
                <template slot-scope="scope">
                  <div class="table-header" ><span class="label">{{ scope.row.name }}</span><tip-icon :content="`数据更新时间：${format(scope.row.updateTime,'YYYY/MM/DD HH:mm')}<br/>数据来源：${scope.row.dataSources?scope.row.dataSources:'--'}`" use-html/></div>
                </template>
              </el-table-column>
              <el-table-column v-for="column in microTaskCostColumns" :key="column.name" :label="column.label" :min-width="column.width || defaultWidth">
                <template slot-scope="scope">
                  <ToolTip
                    :content="getMicroTaskCostContent(column.key).content"
                    :tool-tip="getMicroTaskCostContent(column.key).toolTip" />
                </template>
              </el-table-column>
            </el-table>
          </template>
        </template>
      </template>
      <el-row :gutter="20" :class="{'dividing': !showMobilePage,'mt16': detailInfo.costInfoKey.dynamicKey.length}">
        <!-- 自定义字段 -->
        <el-col v-for="(item,index) in handleField(detailInfo.costInfoKey.dynamicKey)" :span="8" :key="index">
          <el-form-item :prop="item.name" style="margin-bottom: 0px;">
            <el-tooltip slot="label" :content="`${item.name}：`" placement="top" effect="dark">
              <div class="item ellipsisOne">
                {{ `${item.name}：` }}
              </div>
            </el-tooltip>
            <ToolTip :content="item.value" placement="top"/>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
import Title from '@/components/Title';
import { mapState } from 'vuex';
import { format } from '@/filters/date';
import mixins from './mixins';
import { numberTextFormat, moneyFilter } from '@/filters/number';

export default {
  components: {
    Title
  },
  filters: { numberTextFormat, moneyFilter },
  mixins: [mixins],
  props: {
    detailInfo: {// 详情信息
      type: Object,
      default: () => {}
    },
    isCommon: {
      type: Boolean,
      default: false
    },
    isRedBook: {
      type: Boolean,
      default: false
    },
    isWeiBo: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      defaultWidth: '130px',
      readBookColumns: [
        { label: '本月报备(成本)', parentKey: 'monthReportPriceCost' },
        { label: '本月非报备(成本)', parentKey: 'monthNotReportPriceCost' },
        { label: '次月报备(成本)', parentKey: 'nextMonthReportPriceCost' },
        { label: '次月非报备(成本)', parentKey: 'nextMonthNotReportPriceCost' }
      ],
      douYinColumns: [
        { label: '星图报价1-20s', key: 'starMapTwenty' },
        { label: '星图报价20-60s', key: 'starMapSixty' },
        { label: '星图报价60s以上', key: 'starMapAboveSixty' },
        { label: '内容合集单坑位报价', key: 'contentCollectionPrice' }
      ],
      weiBoColumns: [
        { label: '非原创直发', key: 'publish' },
        { label: '非原创转发', key: 'forward' },
        { label: '原创图文', key: 'originalContent' },
        { label: '原创视频', key: 'originalVideo' }
      ],
      BILIColumns: [
        { label: '定制视频', key: 'customVideo' },
        { label: '植入视频', key: 'implantationVideo' },
        { label: '直发动态', key: 'publishTrends' },
        { label: '转发动态', key: 'forwardTrends' }
      ],
      microTaskCostColumns: [
        { label: '非原创直发', key: 'publish' },
        { label: '非原创转发', key: 'forward' },
        { label: '原创图文', key: 'originalContent' },
        { label: '原创视频', key: 'originalVideo' }
      ]
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    redBookData() {
      if (!this.detailInfo.additionalKey) return [];
      const { monthReportPriceCost, nextMonthReportPriceCost, monthNotReportPriceCost, nextMonthNotReportPriceCost } = this.detailInfo.additionalKey;
      const keyMap = [
        { name: '图文', key: 'imageTextPrice' },
        { name: '视频', key: 'videoPrice' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          key: j.key,
          monthReportPriceCost,
          nextMonthReportPriceCost,
          monthNotReportPriceCost,
          nextMonthNotReportPriceCost
        });
      });
      return result;
    },
    getColumns() {
      const platformTypeName = this.detailInfo.platformTypeName;
      switch (platformTypeName) {
        case '抖音': return this.douYinColumns;
        case '微博': return this.weiBoColumns;
        case 'B站': return this.BILIColumns;
      }
    },
    getData() {
      const platformTypeName = this.detailInfo.platformTypeName;
      switch (platformTypeName) {
        case '抖音': return this.douYinData;
        case '微博': return this.weiBoData;
        case 'B站': return this.BILIData;
      }
    },
    douYinData() {
      if (!this.detailInfo.additionalKey) return [];
      const { starMapTwenty, starMapSixty, starMapAboveSixty, contentCollectionPrice, updateTime, dataSources } = this.detailInfo.additionalKey.costPrice;
      const keyMap = [
        { name: '成本价格' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          starMapTwenty,
          starMapSixty,
          starMapAboveSixty,
          contentCollectionPrice,
          updateTime,
          dataSources
        });
      });
      return result;
    },
    weiBoData() {
      if (!this.detailInfo.additionalKey) return [];
      const { publish, forward, originalContent, originalVideo, updateTime, dataSources } = this.detailInfo.additionalKey.microTaskCost;
      const keyMap = [
        { name: '成本价格' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          publish,
          forward,
          originalContent,
          originalVideo,
          updateTime,
          dataSources
        });
      });
      return result;
    },
    microTaskCostData() {
      if (!this.detailInfo.additionalKey) return [];
      const { publish, forward, updateTime, dataSources } = this.detailInfo.additionalKey.costPrice;
      const keyMap = [
        { name: '预估微任务成本' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          publish,
          forward,
          updateTime,
          dataSources
        });
      });
      return result;
    },
    BILIData() {
      if (!this.detailInfo.additionalKey) return [];
      const { customVideo, implantationVideo, publishTrends, forwardTrends, updateTime, dataSources } = this.detailInfo.additionalKey.costPrice;
      const keyMap = [
        { name: '成本信息' }
      ];
      const result = [];
      keyMap.forEach(j => {
        result.push({
          name: j.name,
          customVideo,
          implantationVideo,
          publishTrends,
          forwardTrends,
          updateTime,
          dataSources
        });
      });
      return result;
    },
    separator() {
      return '\xa0' + '|' + '\xa0';
    }
  },
  methods: {
    format,
    getContent(parentKey, key) {
      const item = this.detailInfo.additionalKey[parentKey][key];
      const { costType, value, remark } = item;
      const isEmptyValue = this.isEmptyValue(value);
      if (isEmptyValue && !remark && this.isEmptyValue(costType)) return '--';
      const unit = costType === 1 && !isEmptyValue ? '%' : '';
      const tipValue = costType === 1 ? value : moneyFilter(value);
      const showValue = costType === 1 ? value : numberTextFormat(value, 2);
      return {
        content: `${this.typeMap(costType)}${this.separator}${isEmptyValue ? '--' : showValue}${unit}${remark ? `${this.separator}${remark}` : ''}`,
        toolTip: `${this.typeMap(costType)}${this.separator}${isEmptyValue ? '--' : tipValue}${unit}${remark ? `${this.separator}${remark}` : ''}`
      };
    },
    getMicroTaskCostContent(key) {
      let item = this.detailInfo.additionalKey.microTaskCost[key];
      if (!item) {
        item = {
          value: '',
          remark: ''
        };
      }
      const { value, remark } = item;
      if (this.isEmptyValue(value) && !remark) return '--';
      return {
        content: `${this.isEmptyValue(value) ? '--' : numberTextFormat(value, 2)}${remark ? `${this.separator}${remark}` : ''}`,
        toolTip: `${this.isEmptyValue(value) ? '--' : moneyFilter(value)}${remark ? `${this.separator}${remark}` : ''}`
      };
    },
    isEmptyValue(value) {
      return !(value || value === 0);
    },
    typeMap(type) {
      return {
        0: '固定价格',
        1: '利润分成'
      }[type] || '--';
    },
    tableCellClass({ columnIndex }) {
      if (columnIndex === 0) {
        return 'cellBg';
      }
      return '';
    }
  }
};
</script>
<style lang="scss" scoped>
  .table-header {
    display: flex;
    align-items: center;
    .label {
      font-size: 14px;
      white-space: nowrap;
      margin-right: 4px;
    }
  }
</style>
